<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>手工护理</title>
<meta name="decorator" content="default" />
<script type="text/javascript">
	function filldata(item) {
		document.getElementById("systemCare-id").value = item.attr("id");
		document.getElementById("systemCare-name").value = item.attr("name");
		document.getElementById("systemCare-duration").value = item
				.attr("duration");
		document.getElementById("systemCare-price").value = item.attr("price");
	}

	function registerSelectionListener() {
		$("#selectStoreCareEvent ul li").delegate("a", "click", function() {
			filldata($(this));
			$("#selectStoreCare").popup("close");
			$("#inputForm").valid();
		});
		
		$("#selectSystemCareEvent ul li").delegate("a", "click", function() {
			filldata($(this));
			$("#selectSystemCare").popup("close");
			$("#inputForm").valid();
		});

		$("#selectCardCareEvent ul li").delegate("a", "click", function() {
			filldata($(this));
			$("#selectCardCare").popup("close");
			$("#inputForm").valid();
		});

	}//registerSelectionListener

	function validateInputForm() {
		$("#inputForm").validate({
			submitHandler : function(form) {
				var product = $('#systemCare-name').val();
				var content = "您选择了手工护理【" + product + "】, 请确认消费信息是否正确？";
				// 自定义按钮
				global.confirm(content, function() {
					form.submit();
				});//confirm
			},
			focusInvalid : false,
			rules : {
				'storeCare.care.name' : {
					required : true
				}
			},
			errorContainer : "#messageBox",
			errorPlacement : function(error, element) {
				$("#messageBox").text("输入有误，请先更正。");
				if (element.is(":checkbox") || element.is(":radio")) {
					error.appendTo(element.parent().parent());
				} else {
					error.insertAfter(element);
				}
			},
			messages : {}
		});//validate
	}//validateInputForm

	$().ready(function() {
		loadingEmpoyees(document.getElementById("systemCareEmployeeID"), '');
		validateInputForm();
		registerSelectionListener();
	   disableExitMenu(); 
	});
</script>
</head>
<body>
<div data-role="navbar">
		<ul>
		     <li><a href="${ctx}/cash/member/care"
				class="ui-btn-active">普通护理</a></li>
			<li><a href="${ctx}/cash/member/solutionCare">方案护理</a></li>
		</ul>
	</div>
	<div class="icon-buttons">
					<input type="button" data-inline="true" data-icon="check"
						onclick="return directOpenURL('${ctx}/cash/member/detail?id=${member.customer.id}')"
						data-iconpos="notext" value="返回" />
				</div>
	<div class="container">
		<tags:message content="${message}"></tags:message>
		<div id="care">
			<table id="contentTable" data-role="table"
				class="ui-responsive table-stroke">
				<thead>
					<tr>
						<th colspan="5" style="text-align:center;">已选护理</th>
					</tr>
					<tr>
						<th>护理项目</th>
						<th>数量</th>
						<th>护理美容师</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${member.shoppingCart.systemCares}"
						var="careCart">
						<tr>
							<c:choose>
								<c:when test="${careCart.storeCare.care_type==0}">
									<td>${careCart.storeCare.care.name}</td>
									<td>${careCart.count}</td>
									<td>${careCart.employee.name}</td>
									<td><a data-role="button" data-inline="true"
										data-icon="delete" data-iconpos="notext"
										onclick="deleteTarget('确定要删除：${careCart.storeCare.care.name}?','${ctx}/cash/member/care/delete?id=${careCart.id}')">删除</a>
									</td>
								</c:when>
								<c:when test="${careCart.storeCare.care_type==1}">
									<td>${careCart.storeCare.storeSelfCare.name}</td>
									<td>${careCart.count}</td>
									<td>${careCart.employee.name}</td>
									<td><a data-role="button" data-inline="true"
										data-icon="delete" data-iconpos="notext"
										onclick="deleteTarget('确定要删除：${careCart.storeCare.storeSelfCare.name}?','${ctx}/cash/member/care/delete?id=${careCart.id}')">删除</a>
									</td>
								</c:when>
							</c:choose>
						</tr>
					</c:forEach>
				</tbody>
			</table>
			<div class="pagination">${page}</div>
			<form:form id="inputForm" modelAttribute="systemCare"
				action="${ctx}/cash/member/care/add" method="post">
				<form:hidden path="storeCare.id" id="systemCare-id" />
				<div data-role="fieldcontain" id="selectionfields">
					<label>护理项目:</label>
					<form:input type="text" id="systemCare-name" readonly="true"
						path="storeCare.care.name" />

					<c:if test="${member.cardCareList[0]!=null}">
						<a id="selectButton" data-role="button" href="#selectCardCare"
							data-rel="popup" data-position-to="window" data-transition="pop"
							data-inline="true">会员卡护理</a>
					</c:if>
					<a data-role="button" href="#selectSystemCare" data-rel="popup"
						id="selectButton" data-position-to="window" data-inline="true"
						data-transition="pop">系统护理项目</a>
						
					<a data-role="button" href="#selectStoreCare" data-rel="popup"
						id="selectButton" data-position-to="window" data-inline="true"
						data-transition="pop">店面护理项目</a>	
				</div>

				<div data-role="fieldcontain">
					<label>护理周期</label>
					<form:input path="storeCare.care.duration" type="text"
						id="systemCare-duration" readonly="true" />
				</div>
				<div data-role="fieldcontain">
					<label>零售价格</label>
					<form:input path="storeCare.care.price" type="text"
						id="systemCare-price" readonly="true" />
				</div>
				<div data-role="fieldcontain">
					<label>护理次数</label>
					<form:input path="count" type="text" id="systemCare-count"
						readonly="true" />
				</div>

				<div data-role="fieldcontain">
					<label>服务专员:</label>
					<form:select id="systemCareEmployeeID" path="employee.id"
						name="systemCareEmployeeID">
					</form:select>
				</div>
				<div id="okbutton">
					<input type="submit" data-inline="true" value="确认添加" />
				</div>
			</form:form>
		</div>


		<div data-role="popup" id="selectCardCare">
			<div data-role="header">
				<h1>选择护理项目</h1>
			</div>
			<div data-role="content" style="overflow:scroll;height:350px;"
				id="selectCardCareEvent">
				<ul data-role="listview" id="careList" data-filter="true">
					<c:forEach items="${member.cardCareList}" var="data">
						<c:if test="${data.care_type==0}">
							<li><a name="${data.care.name}"
								duration="${data.care.duration}" id="${data.id}"
								price="${data.care.price}" times="${data.care.times}" href="#">${data.care.name}</a></li>
						</c:if>
						<c:if test="${data.care_type==1}">
							<li><a name="${data.storeSelfCare.name}"
								duration="${data.storeSelfCare.duration}" id="${data.id}"
								price="${data.storeSelfCare.price}"
								times="${data.storeSelfCare.times}" href="#">${data.storeSelfCare.name}</a></li>
						</c:if>
					</c:forEach>
				</ul>
			</div>
			<!-- /content -->
			<div data-role="footer">
				<a href="#" data-rel="back" data-role="button" data-inline="true"
					data-icon="back">取消</a>
			</div>
		</div>

		<div data-role="popup" id="selectStoreCare">
			<div data-role="header">
				<h1>选择护理项目</h1>
			</div>
			<div data-role="content"
				style="overflow:scroll;height:25em;width: 20em;"
				id="selectStoreCareEvent">
				<ul data-role="listview" id="careList" data-filter="true"
					data-filter-placeholder="搜索">
					<c:forEach items="${member.allcareList}" var="data">
						<c:if test="${data.care_type==1}">
							<li><a name="${data.storeSelfCare.name}"
								duration="${data.storeSelfCare.duration}" id="${data.id}"
								price="${data.storeSelfCare.price}"
								times="${data.storeSelfCare.times}" href="#">${data.storeSelfCare.name}</a></li>
						</c:if>
					</c:forEach>
				</ul>
			</div>
			<!-- /content -->
			<div data-role="footer">
				<a href="#" data-rel="back" data-role="button" data-inline="true"
					data-icon="back">取消</a>
			</div>
		</div>

		<div data-role="popup" id="selectSystemCare">
			<div data-role="header">
				<h1>选择护理项目</h1>
			</div>
			<div data-role="content"
				style="overflow:scroll;height:25em;width: 20em;"
				id="selectSystemCareEvent">
				<ul data-role="listview" id="careList" data-filter="true"
					data-filter-placeholder="搜索">
					<c:forEach items="${member.allcareList}" var="data">
						<c:if test="${data.care_type==0}">
							<li><a name="${data.care.name}"
								duration="${data.care.duration}" id="${data.id}"
								price="${data.care.price}" times="${data.care.times}" href="#">${data.care.name}</a></li>
						</c:if>
					</c:forEach>
				</ul>
			</div>
			<!-- /content -->
			<div data-role="footer">
				<a href="#" data-rel="back" data-role="button" data-inline="true"
					data-icon="back">取消</a>
			</div>
		</div>
		<!-- /page popup -->
	</div>
</body>
</html>
